<style scoped>
</style>
<!--  -->
<template>
  <div style="margin: 12px 0 0 24px;">
    <el-button @click="checkUpload" type="text">选择图标（.ico 后缀）</el-button>
    <input style="display:none;" type="file" ref="file" name="file" @change="fileChange" accept=".ico" />
    <a style="font-size: 14px;margin-left:24px;"
      href="https://www.baidu.com/s?wd=%E5%9C%A8%E7%BA%BFico%E5%9B%BE%E6%A0%87%E5%88%B6%E4%BD%9C" target="_blank">在线生成
      ico 图标</a>
    <div style="width:66px;height:66px;padding:2px;" v-if="exsit !== null && exsit">
      <img style="width: 100%;" :src="src" ref="src" alt="favicon.ico">
      <a style="font-size: 12px;" @click="faviconDelete">删除</a>
    </div>
    <div v-if="exsit !== null && !exsit" style="font-size:12px; color: #a8a8a8;">无</div>
  </div>
</template>

<script>
import * as DesignFunctions from '@/core/DesignFunctions.js'
import { mapState } from 'vuex'
export default {
  created () {
    // this.defaultSrc = this.src = DesignFunctions.getDesignPath(this.site.site.hostId, this.site.site.id, '/favicon.ico')
    this.$post('/host/exsit-favicon', null).then(response => {
      if (response && parseInt(response) === 1) {
        // 存在
        this.exsit = true
        this.src = DesignFunctions.getDesignPath(this.site.site.hostId, this.site.site.id, '/favicon.ico')
      } else {
        // 不存在
        this.exsit = false
      }
    })
  },
  computed: {
    ...mapState([
      'site'
    ])
  },
  watch: {
    site: {
      handler (newValue) {
        if (newValue.default.id) {
          // 构建 favicon 图标的链接地址
          // let src = DesignFunctions.getDesignPath(this.$store.state.host.id, this.$store.state.site.site.id, '/favicon.ico')
          this.src = DesignFunctions.getDesignPath(newValue.default.hostId, newValue.default.id, '/favicon.ico')
        }
      },
      deep: true
    }
  },
  data () {
    return {
      src: '',
      exsit: null
    }
  },
  methods: {
    checkUpload () {
      this.$refs['file'].click()
    },
    faviconDelete () {
      // 发送
      this.$post('/upload/favicon-delete', null).then(response => {
        if (response && parseInt(response) === 1) {
          this.exsit = false
          this.$nextTick(() => {
            this.$refs['file'].value = ''
          })
        }
      })
    },
    // 文件改变，就是开始验证上传
    fileChange () {
      let files = this.$refs['file'].files
      let file = files[0]
      if (file.size > 102400) {
        this.$message.error('上传的图标大小不能超过100K')
        return
      }
      // 创建form对象
      let param = new FormData()
      // 通过append向form对象添加数据
      param.append('file', file)
      // 发送
      this.$upload('/upload/favicon', param, {
        begin: () => {
          // 开始时的操作
        },
        complete: (response) => {
          // 完成的操作
          this.exsit = true
          this.$nextTick(() => {
            this.$refs['src'].src = DesignFunctions.getDesignPath(this.site.site.hostId, this.site.site.id, '/favicon.ico') + '?' + (new Date().getTime())
          })
        },
        progressEvent: (progressEvent) => {

        }
      })
    }
  }
}

</script>
